{extend name='common/common' /}

{block name="style"}
<style type="text/css">
    a:hover{
      text-decoration:underline;
      color:#ff00ff;
    }
    a{
        color：#888;!important;
    }
    .clear{
        clear: both;
    }
    .container-fluid .btn.btn-sm{
        float: right;
        margin-left: 10px;
    }
    .container-fluid{
        padding-right: 0px;
    }
    .layui-form-item{
        margin-bottom: 0px;
    }
    .layui-form-item .layui-inline{
        margin-right: 0px;
    }
    .king{
        margin-right: 10px;
    }
    .layui-form{
        display: inline-block;
    }
    .ChartTips{
        position: absolute;
        width: 100%;
        height: 470px;
        z-index: 100;
        background-color: #fff;
        text-align: center;
        line-height: 470px;
        font-size: 20px;
    }
    #markShade{
      position: fixed;
      z-index: 9999999999999;
      background-color: #000;
      opacity: 0.3;
      display: none;
      width: 100%;
      height: 100%;
    }
    #markShade h1 {
      color: #FFF;
      text-align: center;
      margin-top:300px;
    }
</style>
{/block}

{block name="content"}
<div id="markShade">
	<h1>正在导出</h1>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>客户统计</h5>
        </div>
        <div class="ibox-content">
            <!-- 新增时间  -->
            <div class="form-group" style="float: left">
                <label>日期范围：</label>
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="timeInterval" id="timeInterval" placeholder="开始 到 结束 默认为一周">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" style="float: left">
                <label>时长：</label>
                <div class="layui-form-item" style="display: inline-block">
                    <input type="number" class="form-control" id="timeLength" name="timeLength" placeholder="默认时长一天">
                </div>
            </div>
            <a class="btn btn-primary btn-sm getIDs" id="statiSEE" style="margin-left: 20px">查  看</a>
            <div class="clear"></div>
			<div class="ChartTips">
				图表加载中:Loading...
			</div>
            <div id="main1" style="width: 100%;height:450px; min-width:400px;">

			</div>
        </div>

        <div class="ibox-content">
            <!--搜索框开始 pull-right-->
            {if(authCheck('member/memberlist'))}
            <!--  用户本人的客户列表  -->
            <form id='commentForm' data-url="{:url('Member/memberList')}" role="form" method="post" class="form-inline pull-left">
                <div class="content clearfix m-b">

                    <?php if(authCheck('member/director')):?>
                    <div class="form-group">
                            <label>部门：</label>
                            <select class="form-control"  name="depart_id" id="depart_id">
                                <option value="">请选择</option>
                                <?=$dep_Arr;?>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>咨询师姓名：</label>
                            <select class="form-control"  name="user_id" id="user_id">
                                <option value="">请选择</option>
                                <?php foreach($departUserArr as $val):?>
                                    <option value="<?=$val['id']?>"><?=$val['real_name']?></option>>
                                <?php endforeach;?>
                            </select>
                        </div>
                    <?php endif;?>

                    <div class="form-group">
                        <label>客户姓名：</label>
                        <input type="text" class="form-control" id="name" name="name">
                    </div>
                    <div class="form-group">
                        <label>联系方式：</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label>等级：</label>
                        <select class="form-control"  name="grade" id="grade">
                            <option value="0">请选择</option>
                            <?php foreach($gradeArr as $val):?>
                                <option value="<?=$val['id'];?>"><?=$val['name'];?></option>
                            <?php endforeach;?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>状态：</label>
                        <select class="form-control" name="status" id="status">
                            <option value="0">请选择</option>
                            <?php foreach($statusArr as $val):?>
                                <option value="<?=$val['id'];?>"><?=$val['name'];?></option>>
                            <?php endforeach;?>
                        </select>
                    </div>
                    <!-- 新增时间  -->
                    <div class="form-group">
                        <label>日期范围：</label>
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" name="KL-time" id="KL-time" placeholder="开始 到 结束">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="button" style="margin-top:5px" id="search"><strong>搜 索</strong></button>
                    </div>
                    <!--  日/周/月/季/年   -->
                    <div class="form-group">
                        <button class="btn btn-default reportBtns" type="button" style="margin-top:5px" id="seaTimeDate"><strong>日 报</strong></button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success reportBtns" type="button" style="margin-top:5px" id="seaTimeWeek"><strong>周 报</strong></button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success reportBtns" type="button" style="margin-top:5px" id="seaTimeMonth"><strong>月 报</strong></button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success reportBtns" type="button" style="margin-top:5px" id="seaTimeQuarter"><strong>季 报</strong></button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success reportBtns" type="button" style="margin-top:5px" id="seaTimeYear"><strong>年 报</strong></button>
                    </div>
                </div>
            </form>
            {/if}
            <!--  主管客户列表  -->
            <!--搜索框结束-->
            <div class="example-wrap">
                <div class="example">
                    <table id="cusTable">
                        <thead>
                        <th class="text-center" data-field="id">会员ID</th>
                        <th class="text-center" data-field="name">姓名</th>
                        <th class="text-center" data-field="phone">联系电话</th>
                        <th class="text-center" data-field="adress">地址</th>
                        <th class="text-center" data-field="qq">QQ</th>
                        <th class="text-center" data-field="weixin">微信</th>
                        <th class="text-center" data-field="grade">等级</th>
                        <th class="text-center" data-field="status">状态</th>
                        <th class="text-center" data-field="relation">录入人</th>
                        <th class="text-center" data-field="time">录入时间</th>
                        <th class="text-center" data-field="remarks">备注</th>
                        </thead>
                    </table>
                </div>
            </div>
            <!-- End Example Pagination -->
        </div>
    </div>
</div>
<!-- End Panel Other -->
<div class="laycontent" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="tree"></ul>
</div>
{/block}
{block name="script"}

<script src="__JS__/bootstrap-table-export.js"></script>
<script src="__JS__/tableExport.js"></script>
<script type="text/javascript" src="__JS__/getTime.js"></script>
<script type="text/javascript">
    //统计
    function statis() {
        var myChart = echarts.init(document.getElementById('main1'));
            // 指定图表的配置项和数据
            //ajax请求数据
            var timeInterval = $('#timeInterval').val();
            var timeLength = $('#timeLength').val();
            var pageNumber = 1;
            var pageSize = 1000;
            var name = $('#name').val();
            var phone = $('#phone').val();
            var grade = $('#grade').val();
            var status = $('#status').val();
            var staff = $('#staff').val();//咨询师名字
            var depart_id = $('#depart_id').val();//部门id
            if(timeLength < 0){
                layer.msg("时长不能小于0");
                return false;
            }
			$(".ChartTips").show();
            $.post("{:url('statistics/ajaxStatis')}",{
                timeInterval:timeInterval,
                timeLength:timeLength,
                pageNumber:pageNumber,
                pageSize:pageSize,
                name:name,
                phone:phone,
                grade:grade,
                status:status,
                staff:staff,
                depart_id:depart_id
            },function (res) {
                if(res.code == 1){
                    var option = {
                        title: {
                            text: '客户统计图'
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            //线条指示
                            data:[res.redData.name,res.blueData.name,res.greenData.name,res.kingData.name]
                        },
                        toolbox: {
                            //工具栏
                            feature: {
                                saveAsImage: {},
                                magicType: {},
                                restore: {},
                                dataView: {},
                                dataZoom: {}
                            }
                        },
                        grid: {
                            //直角坐标系内绘图网格
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : res.Xdata
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:res.redData.name,
                                type:'line',
                                stack: '总量',
                                areaStyle: {normal: {}},
                                data:res.redData.data,
                            },
                            {
                                name:res.blueData.name,
                                type:'line',
                                stack: '总量',
                                areaStyle: {normal: {}},
                                data:res.blueData.data,
                            },
                            {
                                name:res.greenData.name,
                                type:'line',
                                stack: '总量',
                                areaStyle: {normal: {}},
                                data:res.greenData.data,
                            },
                            {
                                name:res.kingData.name,
                                type:'line',
                                stack: '总量',
                                areaStyle: {normal: {}},
                                data:res.kingData.data,
                            },
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
					$(".ChartTips").hide();
					layer.msg(res.Msg);
                }else{
					layer.msg('图表加载失败');
                }
            })
    }
    function DoOnMsoNumberFormat(cell, row, col) {
       var result = "";
       if (row > 0 && col == 0)
           result = "\\@";
       return result;
    }
    function initTable() {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "{:url('statistics/memberstatis')}", //获取数据的地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 25,  //每页显示的记录数
            pageNumber:1, //当前第几页
            pageList: [25, 100, 1000, 10000, 100000],  //记录数可选列表
            sidePagination: "server", //表示服务端请求
						resizable:true,//可变宽列表
            paginationFirstText: "首页",
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            paginationLastText: "尾页",
            queryParamsType : "undefined",
            showToggle:true,
			showColumns:true,
			showExport: true,  //是否显示导出按钮
            exportTypes:['excel'],  //导出文件类型
            Icons:'glyphicon-export',
            exportOptions:{
				  // ignoreColumn: [0,1],  //忽略某一列的索引
				  fileName: '客户统计',  //文件名称设置
				  worksheetName: 'sheet1',  //表格工作区名称
				  tableName: '客户统计报表',
				  excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
				  onMsoNumberFormat: DoOnMsoNumberFormat
			  },
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    name:$('#name').val(),
                    phone:$('#phone').val(),
                    grade:$('#grade').val(),
                    status:$('#status').val(),
                    time:$('#KL-time').val(),
                    user_id:$('#user_id').val(),//咨询师名字
                    depart_id:$('#depart_id').val(),//部门id
                };
                return param;
            },
            onLoadSuccess: function(res){ //加载成功时执行
                if('-1' == res.code){
                    layer.msg(res.msg, {anim : 6,time : 1000});
                }else{
					          layer.msg("加载数据成功", {time : 1000});
                    var li = "<li data-type='all' onclick='ExportAll();'><a href='javascript:void(0)'>导出全部</a></li>";
                             $(".export>.dropdown-menu").append(li);
                             $(".export>.dropdown-menu>li:nth-child(1)>a").html('导出当前');
				        }
            },
            onLoadError: function(){  //加载失败时执行
                layer.msg("加载数据失败");
            }
        });
    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();
        //调用函数，初始化统计图
        statis();
        //当点击查询按钮的时候执行
        $("#search").bind("click", initTable);
		$("#statiSEE").bind("click", function(){statis();});
    });

    //时间选择
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#KL-time'
            ,range: true
        });
        laydate.render({
            elem: '#timeInterval'
            ,range: true
        });
    });
    // 日/周/月/季/年报表
    $(function() {
        var seaTime = '';

        layui.use(['form','laydate'], function() {
            var form = layui.form,laydate = layui.laydate;
            laydate.render({elem: '#KL-time',range: true});
            laydate.render({elem: '#timeInterval',range: true});
        });
        //当点击查询按钮的时候执行
        $("#timeInterval").on("click",function(){
            statis();
        });

        $(".reportBtns").on('click',function(){
            $(".reportBtns").addClass('btn-success').removeClass('btn-default');
            $(this).addClass('btn-default');
        });
        //日报
        $("#seaTimeDate").on('click',function(){
            if(seaTime != ""){
                seaTime = "";
                $("#KL-time").val("");
                initTable();
            }
        });
        //周报
        $("#seaTimeWeek").on('click',function(){
            var week = getWeekStartDate() + " - " + getWeekEndDate();
            if(week != seaTime){
                seaTime = week;
                $("#KL-time").val(week);
                initTable();
            }
        });
        //月报
        $("#seaTimeMonth").on('click',function(){
            var month = getMonthStartDate() + " - " + getMonthEndDate();
            if(month != seaTime){
                seaTime = month;
                $("#KL-time").val(month);
                initTable();
            }
        });
        //季报
        $("#seaTimeQuarter").on('click',function(){
            var quarter = getQuarterStartDate() + " - " + getQuarterEndDate();
            if(quarter != seaTime){
                seaTime = quarter;
                $("#KL-time").val(quarter);
                initTable();
            }
        });
        //年报
        $("#seaTimeYear").on('click',function(){
            var year = new Date().getYear();
            year += (year < 2000) ? 1900 : 0;
            year = year + "-01-01 - " + year + "-12-31";
            if(year != seaTime){
                seaTime = year;
                $("#KL-time").val(year);
                initTable();
            }
        });
    });
	// Ajax 改变不同部门时的不同职员
    $(function(){
        $('#depart_id').on('change',function(){
            var depart_id = $('#depart_id').val();
            $.post("{:url('member/departUser')}",{
                depart_id : depart_id
            },function(res){
                if(res.code == 1){
                    var data = res.data;
                    var app = '<option value="">请选择</option>';
                    for(var i in data){
                        app += '<option value="'+data[i]["id"]+'">'+data[i]["real_name"]+'</option>'
                    }
                    $('#user_id').html(app);
                }
            })
        })
    })
    // 导出全部
    var ExportAll = function(){
        $('#markShade').show();
        $.post("./memberAllExpotr",function(res){
          setTimeout(function(){
            window.open("/upload/excel/download" + {:session("id")} + ".xls");
            $('#markShade').hide();
          },5000);
        });
    }
</script>
{/block}
